/**
 * Created by Administrator on 2017/5/10 0010.
 */
import React from "react";
import TotalCount from "./TotalCount";
import { Input, Select } from 'antd';
import TotalCountChinese from "./TotalCountChinese";
import Createorder_DetailItem from "./Createorder_DetailItem";
import ReactKey from "../../../util/ReactKey";
import Config from "../../../util/Config"
const Option = Select.Option;
export default class CreactStepOneGms extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            goods:[],
            num: 0,
            traderName:'',
            currency: '',//币种
            signedContract:"",
            makeType: null, //订单类型，FOB  CMT
            defaultValue: "请选择订单类型",
        }
        this.goods = [{}, {}, {}];
        this.handleChange = this.handleChange.bind(this)
    }

    componentWillMount(){
        this.state.num = this.goods.length;
        this.setState({
            goods: this.goods,
        });
    }

    repalceitem(context, index) {
        let goods = this.state.goods;
        goods.splice(index, 1, context);
        this.setState({
            goods: goods
        });
    }

    setcountcallback(){
        let total = 0;
        let totalmoney=0;
        this.state.goods.map((context,index)=>{
            let quantity = this.refs['creatorderditem'+index].state.context.quantity;
            let price = this.refs['creatorderditem'+index].state.context.price;
            if(quantity){
                total = total+Number(quantity);
                total = Math.ceil(total);
            }
            if(quantity&&price){
                let temptotal = Number(quantity)*Number(price)
                // if(!isNaN(totalmoney)){
                totalmoney = parseFloat(totalmoney)+temptotal;
                totalmoney = parseFloat(totalmoney).toFixed(2);
                // }
            }
        });
        this.refs.totalcount.setState({
            quantity:total,
            totalprice:totalmoney
        });
        this.refs.totalcountchinese.setState({
            count:totalmoney,
        });
    }

    showimgmodal(index,){
        this.props.showimgmodal(index,this.state.goods[index].url)
    }

    additemlist() {
        let goods = this.state.goods;
        goods.push({});
        this.setState({
            goods: goods
        });

    }

    delteitem(index) {
        let goods = this.state.goods;
        goods.splice(index, 1);
        this.setState({
            goods: goods
        },()=>{
            this.setcountcallback();
        });
    }

    additem() {
        return this.state.goods.map((context, index)=> {
            let isshow = true
            return (
                <Createorder_DetailItem context={context} index={index} key={ReactKey.key}
                                        additemlist={this.additemlist.bind(this)}
                                        delteitem={this.delteitem.bind(this)}
                                        totallenght={this.state.goods.length}
                                        repalceitem={this.repalceitem.bind(this)}
                                        isshow={isshow}
                                        showimgmodal = {this.showimgmodal.bind(this)}
                                        ref={'creatorderditem'+index}
                                        setcountcallback = {this.setcountcallback.bind(this)}
                />
            );
        });
    }

    addfrom(){
        return(
            <div className="order_form_total_div">
                <span className="order_form_top_span">
                </span>
                <table className="order_form_table">
                    <thead>
                    <tr className="order_from_tr">
                        <td className="order_frorm_td order_from_td_num order_detail_thead_style"/>
                        <td className="order_frorm_td order_from_td_po order_detail_thead_style" >PO号</td>
                        <td className="order_frorm_td order_from_td_snum order_detail_thead_style"><span style={{color:'red'}}>*</span>款号</td>
                        <td className="order_frorm_td order_from_td_img order_detail_thead_style">图片</td>



                        <td className="order_frorm_td order_from_td_cnum order_detail_thead_style">品名</td>
                        <td className="order_frorm_td order_from_td_describe order_detail_thead_style">描述/规格</td>
                        <td className="order_frorm_td order_from_td_color order_detail_thead_style">颜色</td>
                        <td className="order_frorm_td order_from_td_sizemun order_detail_thead_style">尺码</td>
                        <td className="order_frorm_td order_from_td_sizemun order_detail_thead_style">数量配比</td>
                        {
                          //<td className="order_frorm_td order_from_td_pnum order_detail_thead_style">尺码比例</td>
                        }
                        <td className="order_frorm_td order_from_td_ship order_detail_thead_style">船期</td>
                        



                        <td className="order_frorm_td order_from_td_monad order_detail_thead_style">单位</td>
                        <td className="order_frorm_td order_from_td_pnum order_detail_thead_style"><span style={{color:'red'}}>*</span>数量</td>

                        <td className="order_frorm_td order_from_td_ucost order_detail_thead_style"><span style={{color:'red'}}>*</span>单价</td>
                        <td className="order_frorm_td order_from_td_moeny order_detail_thead_style">金额</td>
                        <td className="order_frorm_td order_from_td_moeny order_detail_thead_style">备注</td>
                        <td className="order_frorm_td order_from_td_delandadd order_detail_thead_style"/>
                    </tr>
                    </thead>
                    {
                        this.additem()
                    }

                    <TotalCount ref={'totalcount'} type={'gms'}/>

                    <TotalCountChinese ref={"totalcountchinese"} type={'gms'}/>

                </table>

            </div>
        );
    }
    _DownLodaExcel(){
        window.location.href = Config.qiuniu+'%E6%88%90%E8%A1%A3%E6%A8%A1%E6%9D%BF.xlsx';
    }
    _ToLeadExcel(){
        this.props.ToLeadExcel();
    }
    toLeadExcel(orders){
        if(orders.length==0){

        }else{
            let goods = this.state.goods;
            let goodstest = [];
            let addindex = [];
            goods.map((context,index)=>{
                let values = Object.values(context);
                if(values.length!=0){
                    addindex.push(index)
                }
            });
            addindex.map((context)=>{
                goodstest.push(goods[context])
            });

            let tgoods = goodstest.concat(orders);
            this.setState({
                goods: tgoods
            },()=>{
                this.setcountcallback();
            });
        }
    }
    showlibrary() {
      this.props.ShowLibrary();
    }
    addModalfromlist(orders) {
        if(orders.length==0){

        }else{
            let goods = this.state.goods;
            let goodstest = [];
            let addindex = [];
            goods.map((context,index)=>{
                let values = Object.values(context);
                if(values.length!=0){
                    addindex.push(index)
                }
            });
            addindex.map((context)=>{
                goodstest.push(goods[context])
            });

            let tgoods = goodstest.concat(orders);
            this.setState({
                goods: tgoods
            });
        }
    }
    setgoodsimg(url,index){
        if(!url){
            Modal.warning({
                title: '图片',
                content: '请选择图片',
            });
            return;
        }
        if(index+1){
            let goods = this.state.goods;
            goods[index].url = url;
            this.setState({
                goods:goods
            });
        }else{
        }
    }
    // handleChange(value) {
    //   this.setState({
    //       currency: value
    //   })
    // }
    traderNameChange(e) {
      if (e.target.value.length > 30) {
        return;
      }
      this.setState({
        traderName: e.target.value
      })
    }
    /*合同编号输入*/
    signedContractChange(e){
        if (e.target.value.length > 50) {
            return;
        }
        this.setState({
            signedContract: e.target.value
        })
    }
    /*制衣厂-录入的成衣订单-输入合同编号*/
    signedContractReturn(){
        if(this.props.fromEdit == "entry"){
            return (
                <span style={{marginLeft:'20px',color:'#333',fontSize:'14px'}}>
                    合同编号:&nbsp;
                    <Input
                        onChange={this.signedContractChange.bind(this)}
                        value={this.state.signedContract}
                        ref={'signedContract'}
                        className="create_order_download_input"
                        width={200}
                        placeholder="请输入合同编号"
                        maxLength="50"
                    />
                </span>
            )
        }
    }
    handleChange(value) {
        this.setState({
            makeType: value,
            defaultValue: value
        })
    }
    render(){
        return (
            <div>
                {/*<p className="create_order_step">*/}
                    {/*第一步：添加商品明细*/}
                    {/*<span className="create_order_step_line"/>*/}
                {/*</p>*/}
                <span style={{marginLeft:'20px',color:'#333',fontSize:'14px'}}>
                    <span style={{color: 'red'}}>*</span>订单类型：
                    <Select
                        defaultValue={this.state.defaultValue}
                        value={this.state.defaultValue}
                        style={{ width: 120,marginRight: '40px' }}
                        onChange={this.handleChange}
                        className="order_creat_select"
                        dropdownClassName="order_creat_select_drop"
                    >
                      <Option value="FOB">FOB</Option>
                      <Option value="CMT">CMT</Option>
                    </Select>
                    客户号:&nbsp;
                    <Input
                        onChange={this.traderNameChange.bind(this)} value={this.state.traderName}
                        ref={'traderName'}
                        className="create_order_download_input"
                        width={200}
                        placeholder="输入客户名称或客户代号"
                    />
                    {
                        // <Select defaultValue="人民币" style={{ width: 120, marginRight: '530px' }} onChange={this.handleChange.bind(this)}>
                        //     <Option value="人民币">人民币</Option>
                        //     <Option value="美元">美元</Option>
                        //     <Option value="英镑">英镑</Option>
                        //     <Option value="日元">日元</Option>
                        //     <Option value="欧元">欧元</Option>
                        //     <Option value="港币">港币</Option>
                        //     <Option value="韩元">韩元</Option>
                        //   </Select>
                    }
                </span>
                {
                    this.signedContractReturn()
                }
                <p className="create_order_download">
                    <span style={{marginLeft:'-20px',color:'#333',fontSize:'14px'}} className="create_order_download_title">币种: 人民币</span>
                    <a className="create_order_download_download" style={{top: '56px'}} onClick={this._DownLodaExcel.bind(this)}>下载excel导入模板</a>
                    <a className="create_order_download_goods" style={{top: '56px'}} onClick={this._ToLeadExcel.bind(this)}>excel导入商品</a>
                    {/*
                     <span className="create_order_excel_in" onClick={this.showlibrary.bind(this)}>+从商品库选择</span>
                     */}
                </p>
                {
                    this.addfrom()
                }
            </div>
        )
    }
}
